// components/line-chart/line-chart.js
import * as echarts from '../../ec-canvas/echarts';

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    chartData: { // 属性名
      type: Object,
      value: null
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true
    }
  },

  /**
   * 数据监听器
   */
  observers: {
    'chartData': function (newValue) {
      this.ecComponent = this.selectComponent('#line-chart');
      this.initChart(newValue);
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initChart: function (optionData) {
      this.ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        var option = {
          title: {
            text: optionData.title,
            left: 'center'
          },
          color: optionData.color,
          legend: {
            data: optionData.legendData,
            top: 30,
            left: 'center',
            z: 100,
            itemWidth: 16,
            itemHeight: 10
          },
          grid: {
            containLabel: true
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            position: function (point, params, dom, rect, size) {
              let x = point[0],
                y = point[1],
                viewWidth = size.viewSize[0],
                boxWidth = size.contentSize[0],
                posX = 0;
              if (x + boxWidth > viewWidth) {
                posX = x - boxWidth;
              } else {
                posX = x;
              }
              return [posX, y];
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 4  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
            boundaryGap: false,
            data: optionData.xAxisData
          },
          yAxis: {
            x: 'center',
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: optionData.seriesData
        };
        chart.setOption(option);
        return chart;
      });
    }
  }
})
